<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <link rel="stylesheet" type="text/css" href="https://lib.baomitu.com/antd/4.16.3/antd.css"/> -->
		<!-- <link rel="stylesheet" type="text/css" href="https://lib.baomitu.com/iview/3.5.5-rc.1/styles/iview.min.css" /> -->

		<!-- <script src="//vuejs.org/js/vue.min.js"></script> -->
		<!-- import stylesheet -->
		<!-- <link rel="stylesheet" href="//unpkg.com/view-design/dist/styles/iview.css"> -->
		<!-- import iView -->
		<!-- <script src="//unpkg.com/view-design/dist/iview.min.js"></script> -->
		    <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
		    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
		    <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
	</head>
	<body>
		<div id="app">
			 <i-Table :columns="columns2" :data="data4">
			    <template slot-scope="{ row, index }" slot="name">
			      <Input type="text" v-model="editName" v-if="editIndex === index" />
			      <span v-else>{{ 1 }}</span>
			    </template>
			
			    <template slot-scope="{ row, index }" slot="age">
			      <Input type="text" v-model="editAge" v-if="editIndex === index" />
			      <span v-else>{{ row.age }}</span>
			    </template>
			
			    <template slot-scope="{ row, index }" slot="birthday">
			      <Input type="text" v-model="editBirthday" v-if="editIndex === index" />
			      <span v-else>{{ getBirthday(row.birthday) }}</span>
			    </template>
			
			    <template slot-scope="{ row, index }" slot="address">
			      <Input type="text" v-model="editAddress" v-if="editIndex === index" />
			      <span v-else>{{ getA(1) }}</span>
			    </template>
			
			    <template slot-scope="{ row, index }" slot="action">
			      <div v-if="editIndex === index">
			        <Button @click="handleSave(index)">保存</Button>
			        <Button @click="editIndex = -1">取消</Button>
			      </div>
			      <div v-else>
			        <Button @click="handleEdit(row, index)">操作</Button>
			      </div>
			    </template>
			  </i-Table>

		</div>

	</body>
	<!-- 	<script src="https://lib.baomitu.com/vue/2.6.14/vue.min.js"></script>
	<script src="https://lib.baomitu.com/iview/3.5.5-rc.1/iview.min.js" type="text/javascript" charset="utf-8"></script> -->
	<script>
		const vm = new Vue({
			el: "#app",
			data() {
				return {
					columns2: [{
							title: 'Name',
							key: 'name',
							width: 100,
							fixed: 'left'
						},
						{
							title: 'Age',
							key: 'age',
							width: 100
						},
						{
							title: 'Province',
							key: 'province',
							width: 100
						},
						{
							title: 'City',
							key: 'city',
							width: 100
						},
						{
							title: 'Address',
							key: 'address',
							width: 200
						},
						{
							title: 'Postcode',
							key: 'zip',
							width: 100
						},
						{
							title: 'Action',
							key: 'action',
							fixed: 'right',
							width: 120,
							render: (h, params) => {
								return h('div', [
									h('Button', {
										props: {
											type: 'text',
											size: 'small'
										}
									}, 'View'),
									h('Button', {
										props: {
											type: 'text',
											size: 'small'
										}
									}, 'Edit')
								]);
							}
						}
					],
					data4: [{
							name: 'gg',
							age: 18,
							address: 'New York No. 1 Lake Park',
							province: 'America',
							city: 'New York',
							zip: 100000
						},
						{
							name: 'Jim Green',
							age: 24,
							address: 'Washington, D.C. No. 1 Lake Park',
							province: 'America',
							city: 'Washington, D.C.',
							zip: 100000
						},
						{
							name: 'Joe Black',
							age: 30,
							address: 'Sydney No. 1 Lake Park',
							province: 'Australian',
							city: 'Sydney',
							zip: 100000
						},
						{
							name: 'Jon Snow',
							age: 26,
							address: 'Ottawa No. 2 Lake Park',
							province: 'Canada',
							city: 'Ottawa',
							zip: 100000
						},
						{
							name: 'John Brown',
							age: 18,
							address: 'New York No. 1 Lake Park',
							province: 'America',
							city: 'New York',
							zip: 100000
						},
						{
							name: 'Jim Green',
							age: 24,
							address: 'Washington, D.C. No. 1 Lake Park',
							province: 'America',
							city: 'Washington, D.C.',
							zip: 100000
						},
						{
							name: 'Joe Black',
							age: 30,
							address: 'Sydney No. 1 Lake Park',
							province: 'Australian',
							city: 'Sydney',
							zip: 100000
						},
						{
							name: 'Jon Snow',
							age: 26,
							address: 'Ottawa No. 2 Lake Park',
							province: 'Canada',
							city: 'Ottawa',
							zip: 100000
						}
					]
				}
			},
		  methods:{
			  getA(e){
				  console.log(e)
				  return 1
				  
			  },
			  handleEdit (row, index) {
			          this.editName = row.name;
			          this.editAge = row.age;
			          this.editAddress = row.address;
			          this.editBirthday = row.birthday;
			          this.editIndex = index;
			        },
			        handleSave (index) {
			          this.data[index].name = this.editName;
			          this.data[index].age = this.editAge;
			          this.data[index].birthday = this.editBirthday;
			          this.data[index].address = this.editAddress;
			          this.editIndex = -1;
			        },
			        getBirthday (birthday) {
			          const date = new Date(parseInt(birthday));
			          const year = date.getFullYear();
			          const month = date.getMonth() + 1;
			          const day = date.getDate();
			          return `${year}-${month}-${day}`;
			        }
			  
		  }

		})
	</script>
</html>
